<template>
  <el-row>
    <el-tabs type="border-card">
      <el-tab-pane :label="$t('orderModule.order.basicInfo.title')">
        <el-row v-if="loginInfo" class="time-div">
          {{ loginInfo['createTime'] }}
          <span>
            {{ loginInfo['area'] }}
          </span>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-image
              style="width: 150px; height: 150px"
              :src="personalInfo['headPortrait'] ? personalInfo['headPortrait'] : '../../assets/images/defaultHead.jpg'"
            />
          </el-col>
          <el-col :span="18">
            <table class="table-info">
              <tr>
                <td>
                  {{ this.$t('orderModule.order.basicInfo.registerDate') }}
                </td>
                <td>
                  {{ personalInfo['createTime'] }}
                </td>
                <td>
                  {{ this.$t('usrModule.list.table.loginSource') }}
                </td>
                <td>
                  {{ personalInfo['registerSource'] }}
                </td>
              </tr>
              <tr>
                <td>
                  {{ this.$t('orderModule.order.basicInfo.userId') }}
                </td>
                <td>
                  {{ personalInfo['id'] }}
                  <el-tag :color="$t('usrModule.list.creditStatus')[personalInfo['creditStatus'] ? personalInfo['creditStatus'] : 0]['color']">
                    {{ $t('usrModule.list.creditStatus')[personalInfo['creditStatus'] ? personalInfo['creditStatus'] : 0]['name'] }}
                  </el-tag>
                </td>
                <td>
                  {{ this.$t('usrModule.list.table.userLevel') }}
                </td>
                <td>
                  {{ personalInfo['grade'] }}
                </td>
              </tr>
              <tr>
                <td>
                  {{ this.$t('orderModule.order.basicInfo.mobile') }}
                </td>
                <td>
                  {{ personalInfo['phoneNumber'] }}
                </td>
                <td>
                  {{ this.$t('usrModule.list.table.userAuthentication') }}
                </td>
                <td class="a" @click="goToAuth">
                  {{ this.$t('orderModule.order.approveInfo.checkUp') }}{{ this.$t('orderModule.order.approveInfo.auth') }}
                </td>
              </tr>
              <tr>
                <td>
                  {{ this.$t('orderModule.order.basicInfo.email') }}
                </td>
                <td>
                  {{ personalInfo['email'] }}
                </td>
                <td>
                  {{ this.$t('usrModule.list.table.bankAccount') }}
                </td>
                <td class="a" @click="goToBank">
                  {{ this.$t('orderModule.order.approveInfo.checkUp') }}{{ this.$t('orderModule.order.approveInfo.bank') }}
                </td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-tabs type="border-card">
      <el-tab-pane :label="$t('financeModule.list.title')">
        <order-list />
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
import { getRecently, getPersonalInfo } from '@/api/user'
import orderList from '@/views/order/orderList'
export default {
  name: 'UserDetail',
  components: {
    orderList
  },
  data() {
    return {
      loginInfo: {},
      personalInfo: {},
      para: null
    }
  },
  mounted() {
    this.getInfo()
    this.getPersonal()
  },
  methods: {
    getInfo() {
      getRecently(this.$route.query.userId)
        .then(res => {
          if (res.success) {
            this.loginInfo = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    getPersonal() {
      getPersonalInfo(this.$route.query.userId)
        .then(res => {
          if (res.success) {
            console.log(res.data)
            this.personalInfo = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    goToBank() {
      this.$router.push({
        name: 'bankDetail',
        query: {
          userId: this.$route.query.userId
        }
      })
    },
    goToAuth() {
      this.$router.push({
        name: 'authDetail',
        query: {
          userId: this.$route.query.userId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs{
  margin: 10px;
}
.time-div{
  text-align: center;
  margin-bottom: 20px;
  & span{
    margin-left: 20px;
  }
}
.table-info{
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  td{
    border: 1px #cccccc solid;
    height: 40px;
    line-height: 40px;
  }
  td:first-child, td:nth-child(3){
    text-align: right;
    padding-right: 10px;
  }
  td:last-child, td:nth-child(2){
    text-align: left;
    padding-left: 10px;
  }
  .a{
    color: #409EFF;
    &:hover{
      cursor:pointer;
    }
  }
}
</style>
